<template>
  <div>
    <van-nav-bar
      title="个人信息"
      fixed
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #right>
        <van-icon name="success" size="22" />
      </template>
    </van-nav-bar>
    <van-form class="myform">
      <van-field readonly v-model="userinfo.username" name="username" label="用户名" />
      <van-field v-model="statement" name="statement" label="个性签名" />
      <van-field name="sex" label="性别">
        <template #input>
          <van-radio-group v-model="sex" direction="horizontal">
            <van-radio name="保密">保密</van-radio>
            <van-radio name="男">男</van-radio>
            <van-radio name="女">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field :value="birthday" name="birth" label="生日" @click="showPicker = true" />
      <van-popup v-model="showPicker" position="bottom">
        <van-datetime-picker
          v-model="birth"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          @confirm="onConfirm"
          @cancel="showPicker = false"
        />
      </van-popup>
      <van-field readonly v-model="userinfo.point" name="point" label="用户积分" />
      <van-field readonly v-model="userinfo.level" name="level" label="等级" />
    </van-form>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'changePassword',
  data() {
    return {
      showPicker: false,
      birth: new Date(),
      minDate: new Date(1900, 1, 1),
      maxDate: new Date(),
      statement: this.$store.state.userinfo.statement,
      sex: this.$store.state.userinfo.sex
    }
  },
  computed: {
    ...mapState(['userinfo']),
    birthday() {
      return (
        this.birth.getFullYear() +
        '年' +
        (this.birth.getMonth() + 1) +
        '月' +
        this.birth.getDate() +
        '日'
      )
    }
  },
  methods: {
    // 头部左侧图标动作
    onClickLeft() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/')
    },
    // 头部右侧图标点击动作
    onClickRight() {
      this.commen.changeUserinfo(
        {
          statement: this.statement,
          birth: {
            year: this.birth.getFullYear(),
            month: this.birth.getMonth() + 1,
            day: this.birth.getDate()
          },
          sex: this.sex
        },
        res => {
          if (res.data.status === 200) {
            this.$dialog({ message: res.data.msg })
            this.userinfo.birth = this.birthday
            this.userinfo.statement = this.statement
            this.userinfo.sex = this.sex
          } else {
            this.$dialog({ message: res.data.msg })
          }
        }
      )
    },
    onSubmit() {},
    onConfirm(time) {
      this.userinfo.birth = time
      this.showPicker = false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.van-field--disabled {
  color: #323233;
}
</style>
